import { useState } from "react"
import { useSelector, useDispatch } from "react-redux"
import { add, update } from "../../store/modules/counterStore"
import { useRef } from "react"



export default function Index() {
    // 使用数据,state代表整个仓库中的数据
    let { count, list } = useSelector(state => state.counter)
    // const { data, setData } = useState(count)

    const dispatch = useDispatch() // 触发器
    const addCount = () => {
        const action = add();
        dispatch(action);
    }
    const inputRef = useRef(null)
    return (
        <div>
            {/* <h3>{count}</h3>
            <button onClick={addCount}>+</button> */}
            <input type="text" ref={inputRef} />
            <button onClick={() => { dispatch(update(inputRef.current.value)); inputRef.current.value = '' }}>添加</button>
            <ul>
                {
                    list.map((item) => {
                        return <li key={item}>{item}</li>
                    })
                }
            </ul>

        </div>
    )
}
